<template>
	<div class="middle">
		<div class="middlebg"></div>
		<!--头部-->
		<div class="top">
			<span class="teacherPlan">教学计划 <i class="el-icon-arrow-right"></i></span>
			<span class="addTeacherPlan" @click="addTeacherPlan" v-if="rule==1?false:true">+创建教学计划</span>
			<span class="back" @click="back">返回</span>
		</div>
		<el-card class="box-card" v-loading="loading" element-loading-background="rgba(255,255,255, 0.5)">
			<div class="boxCard">
				<!--搜索区域-->
				<el-form :inline="true" class="demo-form-inline">
				  <el-form-item label="学年">
				    <el-select placeholder="学年" v-model="selectId" clearable>
				      <el-option v-for="item in schoolYearInfo" :label="item.year" :value="item.id" :key ="item.id"></el-option>
				    </el-select>
				  </el-form-item>
				  <el-form-item label="年级">
				    <el-select placeholder="年级" v-model="classification" clearable>
				      <el-option v-for ="item in gradeInfo" :label="item.grade_title" :value="item.id" :key="item.id"></el-option>
				    </el-select>
				  </el-form-item>
				  <el-form-item>
				    <el-button type="danger" @click="onSubmit">搜索</el-button>
				  </el-form-item>
				</el-form>
				<!--表格区域-->
				<el-table :data="program_info" style="width: 100%">
				    <el-table-column prop="grade_title" label="年级" width="100" align="center"></el-table-column>
				    <el-table-column prop="year_semester" label="学年" width="200" align="center"></el-table-column>
				    <el-table-column label="计划" align="center">
				    	<template slot-scope="scope">
				    		<el-button type="warning"  plain size="mini" @click="createPlan(scope.row.id)">单元计划</el-button>
				    	</template>
				    </el-table-column >
				    <el-table-column label="操作" align="center">
				    	<template slot-scope="scope">
				    		<el-button @click="edit(scope.row.id)" type="primary" plain size="mini" onsubmit="return false;">编辑</el-button>
				    		<!-- <el-button class="lesson" type="info" plain size="mini" @click="lesson(scope.row.id)">一键备课</el-button> -->
			  				<el-button @click="del(scope.row.id)" type="success" plain size="mini">删除</el-button>
				    	</template>
				    </el-table-column>
				</el-table>
				<!--分页功能-->
				<el-pagination
				   class="fenye"
				   @size-change="SizeChange"
				   @current-change="currentChange"
				   :current-page="page"
			       :page-sizes="pagesizes"
			       :page-size="rows"
			       layout="total, sizes, prev, pager, next, jumper"
			       :total="total"
			       v-if="program_info.length == 0? false :true">
			  </el-pagination>
			</div>
			<!--创建教学计划-->
			<el-dialog class="card" :visible.sync="teacherPlan" width="60%" center @close="closeDialog">
				<el-steps :active="active" finish-status="success">
				</el-steps>
				<!--第一屏-->
				<el-form v-if="active == 0">
					<div>
				  		<span class="title">选择学期</span>
				  		<div class="center" v-model="nowYearInfo">
				  			<div class="semester" v-for="item in nowYearInfo" @click="lastSemester(item.semester,item.id)" :id="item.semester*10">{{item.year}}</div>
				  		</div>
				  	</div>
				  	<div>
				  		<span class="title">选择年级</span>
				  		<div class="center">
				  			<div class="grade" v-for="item in gradeInfo" @click="selectGrade(item.id)" :id="item.id">{{item.grade_title}}</div>
				  		</div>
				  	</div>
				  	<div>
				  		<span class="title">选择课时</span>
				  		<div class="center">
				  			<el-input class="classNum" v-model="classNum"></el-input>
				  			<span>节课</span>
				  		</div>
				  	</div>
				</el-form>
				<!--第二屏-->
				<el-form v-if="active == 1">
					<span class="title">教学目标</span>
					<el-form :label-position="labelPosition" v-model="getProjectInfo">
						<span class="sport" v-for=" item in getProjectInfo">
							<span class="twoTitle" :id="item.id" @click="projectId(item.id)">{{item.title}}</span>
						</span>
					</el-form>
				</el-form>
				<!--第三屏-->
				<el-form v-if="active == 2">
					<span class="title">单元计划</span>
					<!-- 项目 -->
					<div class="sport" v-model="getPlan" v-for = "item in getPlan">
						<div class="oneTitle">{{item.title}}</div>
						<span class="twoTitle" v-for ="it in item.get_plan_motion" :id="it.id" @click="selectProject(it.id,it.motion,it.plan_type_id)">{{it.motion}}</span>
					</div>
					<!-- 选择课时 -->
			  		<div class="left">
			  			<span class="hour">课时</span>
			  			<el-input class="classNum" v-model="planLength"></el-input>
			  			<span>节课</span>
			  		</div>
					<!-- 总课时 -->
			  		<div class="left">
			  			<span class="center">已选总课时：{{class_hour}}</span>
			  		</div>
				</el-form>
				<!--按钮-->
				<div slot="footer" class="dialog-footer">
					<el-button @click="prev">上一步</el-button>
					<el-button style="margin-top: 12px;" @click="next" v-if="active== 0">下一步</el-button>
					<el-button v-if="active == 1" @click="insertProgram">确认创建</el-button>
					<el-button type="primary" v-if="active == 1 " @click="preservation">保存并定制单元计划</el-button>
					<el-button v-if="active == 2" @click="insertTeacherPlan">确认创建</el-button>
				</div>
			</el-dialog>
			<!--编辑-->
			<el-dialog class="card" :model="editTeacherProgramInfo" :visible.sync="editTeacherPlan" width="60%" center @close='closeDialog'>
				<el-steps :active="active" finish-status="success">
				</el-steps>
				<!--第一屏-->
				<el-form v-if="active == 0" >
					<div>
				  		<span class="title">选择学期</span>
				  		<div class="center">
				  			<!-- <div class="semester" @click="lastSemester(1)" id="semester1">{{yearInfo.year+'上学期 '+yearInfo.last_semester}}</div>
				  			<div class="semester" @click="lastSemester(2)" id="semester2">{{yearInfo.year+'下学期'+yearInfo.next_semester}}</div> -->
							<div class="semester" v-for="item in nowYearInfo" @click="lastSemester(item.semester)" :id="item.semester*10">{{item.year}}</div>
				  		</div>
				  	</div>
				  	<div>
				  		<span class="title">选择年级</span>
				  		<div class="center">
				  			<div class="grade" v-for="item in gradeInfo" @click="selectGrade(item.id)" :id="item.id">{{item.grade_title}}</div>
				  		</div>
				  	</div>
				  	<div>
				  		<span class="title">选择课时</span>
				  		<div class="center">
				  			<el-input class="classNum" v-model="editTeacherProgramInfo.class_hour"></el-input>
				  			<span>节课</span>
				  		</div>
				  	</div>
				</el-form>
				<!--第二屏-->
				<el-form v-if="active == 1">
					<span class="title">重新选择教学目标</span>
					<el-form :label-position="labelPosition" v-model="getProjectInfo">
						<span class="sport" v-for=" item in getProjectInfo">
							<span class="twoTitle" :id="item.id" @click="projectId(item.id)">{{item.title}}</span>
						</span>
					</el-form>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="prev">上一步</el-button>
					<el-button style="margin-top: 12px;" @click="editNext" v-if="active== 0">下一步</el-button>
					<el-button v-if="active == 1" @click="editPostInsertProgram">确认创建</el-button>
				</div>
			</el-dialog>
			<!-- 单元计划面板 -->
			<el-dialog class="card" :visible.sync="unit_plan">
				<div class="sport" v-model="planTypeInfo" v-for="item in planTypeInfo">
					<div class="oneTitle" :id="item.id">{{item.title}}</div>
					<span class="twoTitle" v-for="it in item.get_plan_motion" :id="it.id" @click="selectProject2(it.id,it.motion,it.plan_type_id)">{{it.motion}}</span>
				</div>
				<div slot="footer">
					<el-button class="post" type="primary" plain  @click="postCreate">保存</el-button>
				</div>
			</el-dialog>
		</el-card>

	</div>
</template>

<script>
	export default {
		data(){
			return{
				labelPosition:'right',//又对其
				loading:true,
				allContent:[],//创建第二页内容
				checked:true,//选中为true
        program_info:[],//存放首页信息
        rows:4,//每页几条
        page:1,//当前显示页数
        pagesizes:[4,5,10,15,20],//更改每页显示条数
        total:20,//一共多少条,
        teacherPlan:false,//创建面板
        classNum:'',
        active:0,
        school_year_id:'',
        nowYearInfo:[],
        gradeInfo:[],
        getProjectInfo:[],//存放运动项目信息
				oneProjectIdAll:[],//存放选中项目id
				twoProjectIdAll:[],//存放project_id
				projectIdAll:[],//存放所以项目id
        projectInfo:[],
        gradeId:'',
        progect_id:'',//创建项目一级id
        semester:'',
        planMotion:[],
        teacher_program:'',//教学计划id
        classNumber:'',
        motionTitle:'',//教案名称,
        plan_id:'',
				getPlan:[],//单元计划运动项目
        class_hour:'',//总时长
        yearType:'all',
        schoolYearInfo:[],
        selectId:'',
        gradeInfo:[],
        classification:'',
        //获取教学计划信息
        editTeacherProgramInfo:{
          id:'',//教学计划id
          class_hour:'',//课时
          newProjectId:'',//新的运动项目
          new_school_year_id:'',//新的学年id
          newGradeId:'',//新的年级id
					GradeId:'',//旧的年级id
          newSemester:'',//新的学期
          grade_title:'',
          year:'',
					plan_type_id:'',//运动项目
        },
        gradeArr:[],
				level:'',//判断一级标题二级标题的依据
        editTeacherPlan:false,//编辑面板隐藏
        projectInfoArr:[],
				//单元计划区域
				unit_plan:false,
				planArr:[],//存放选择的单元计划项目
				planLength:0,//项目个数
				planProjectIdAll:[],//单元计划项目id
				code:'',//成功状态
				planTypeInfo:[],//单元计划页面
				teacherPlanInfo:[],//
				info:{
					class_hour:'',
					grade_id:'',
					id:'',
					school_year_id:'',
				},
				delId:[],//删除单元计划的id
				teacherPlanInfoArr:[],//已被选中单元计划id
				plandata:[],//单元计划data
				planInfoId:[],//所有单元计划项目的id
			}
		},
		methods:{
			//获取教学计划首页
			getProgramInfo(){
				this.$http.post('/api/program/getProgramInfo',{
					page:this.page,
					rows:this.rows,
					grade_id:this.classification,
					school_year_id:this.selectId,
				}).then(res=>{
					this.program_info = res.data.data
					res.data.data.map(item=>{
						item.grade_title = item.get_grade.grade_title
						item.year_semester = item.get_school_year.section+item.semester
					})
					this.loading = false
					this.total = res.data.count
				})
			},
			//搜索
			onSubmit(){
				this.getProgramInfo()
				this.selectId= ''
				this.classification= ''
			},
			//获取学年
			getYear(){
				this.$http.post('/api/program/getSchoolYearGradeInfo',{
					type:this.yearType,
				}).then(res=>{
				  console.log(res.data.data)
					this.schoolYearInfo = res.data.data.schoolYearInfo
					this.gradeInfo = res.data.data.gradeInfo
				})
			},
			//每页显示条数
			SizeChange(val){
				this.rows = val
				this.getProgramInfo()
			},
			//切换第几页
			currentChange(val){
        this.page = val
        this.getProgramInfo()
		 	},
		 	//删除教学计划
			del(id){
				this.$confirm('是否永久删除, 是否继续?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
		        	this.$http.post('/api/program/deleteProgram', {
		        		id:id
		        	}).then(res=>{
						if(res.data.code == 200) {
							this.$message({
								type:'success',
								message:res.data.msg
							})
							this.getProgramInfo()
						}else if (res.data.errorCode == 400) {
		        			this.$message({
		        				type:'error',
		        				message:res.data.msg
		        			})
		        		}
		        	})
		        });
			},
			//选择上下学期
			lastSemester(id,yearId){
				if(!this.semester) {
					$('#'+id*10).css({"background":"#00B02D"})
					$('#'+id*10).css({"color":"#fff"})
					this.semester = id
					this.school_year_id = yearId
				}else if(id == this.semester) {
					$('#'+id*10).css({"background":"#ccc"})
					$('#'+id*10).css({"color":"#666"})
					this.semester = ''
					this.school_year_id = yearId
				}else if(id != this.semester) {
					$('#'+id*10).css({"background":"#00B02D"})
					$('#'+id*10).css({"color":"#fff"})
					$('#'+this.semester*10).css({"background":"#ccc"})
					$('#'+this.semester*10).css({"color":"#666"})
					this.semester = id
					this.school_year_id = yearId
				}
				//判断选择是上学期还是下学期
				if(this.semester == '1') {
					this.editTeacherProgramInfo.newSemester ='1'
				}else if(this.semester == '2') {
					this.editTeacherProgramInfo.newSemester ='2'
				}
			},
			//点击班级
			selectGrade(id){
				if(!this.gradeId) {
					$('#'+id).css({"background":"#00B02D"})
					$('#'+id).css({"color":"#fff"})
					this.gradeId = id
				}else if(id == this.gradeId) {
					$('#'+id).css({"background":"#ccc"})
					$('#'+id).css({"color":"#666"})
					this.gradeId = ''
				}else if(id != this.gradeId) {
					$('#'+id).css({"background":"#00B02D"})
					$('#'+id).css({"color":"#fff"})
					$('#'+this.gradeId).css({"background":"#ccc"})
					$('#'+this.gradeId).css({"color":"#666"})
					this.gradeId = id
				}
				this.editTeacherProgramInfo.newGradeId = this.gradeId

			},
			//第三屏项目
			projectAll(title,id){
				this.motionTitle = title
				if(!this.progect_id) {
					$('#'+id).css({"background":"#00B02D"})
					this.progect_id = id
				}else if (id == this.progect_id) {
					$('#'+id).css({"background":"#ccc"})
					this.progect_id = ''
				}else if(id != this.progect_id) {
					$('#'+id).css({"background":"#00B02D"})
					$('#'+this.progect_id).css({"background":"#ccc"})
					this.progect_id = id
				}
				this.$http.post('/api/teacher_plan/getPlanMotion',{
					grade_id:this.gradeId,
					title:title
				}).then(res=>{
					this.planMotion = res.data.data
				})
			},
			//编辑功能
			async edit(id){
				this.editTeacherPlan = true
        await this.$http.post('api/program/getSchoolYearGradeInfo',{
				}).then(res=>{
          this.yearInfo = res.data.data.schoolYearInfo
          var year =[]
          this.yearInfo.map(item=>{
            if(item.semester == 1) {
              item.semeter = '上学期'
              item.year = item.section + item.semeter
            }else{
              item.semeter = '下学期'
              item.year = item.section + item.semeter

            }
            year.push(item)
          })
          this.nowYearInfo = year
          this.gradeInfo = res.data.data.gradeInfo
          this.school_year_id =this.yearInfo.id
          var gradeArr =[]
          res.data.data.gradeInfo.map(item=>{
            gradeArr.push(item.id)
          })
          this.gradeArr = gradeArr
          localStorage.setItem('gradeArr',this.gradeArr)
        })
        this.$http.post('/api/program/editTeacherProgramInfo',{
					id:id
				}).then(res=>{
					this.editTeacherProgramInfo = res.data.data
					this.editTeacherProgramInfo.grade_title = res.data.data.get_grade.grade_title
					this.editTeacherProgramInfo.year = res.data.data.get_school_year.year
					//新的学年id
					this.editTeacherProgramInfo.new_school_year_id = res.data.data.get_school_year.id
					//年级id
					this.editTeacherProgramInfo.newGradeId = res.data.data.grade_id
					this.editTeacherProgramInfo.GradeId = res.data.data.grade_id
					//新的学期
					if(res.data.data.semester == '上学期'){
						this.editTeacherProgramInfo.newSemester = 1
					}else if (res.data.data.semester == '下学期'){
						this.editTeacherProgramInfo.newSemester = 2
					}
					//教学计划id
					this.editTeacherProgramInfo.id = res.data.data.id
					//新的项目id
					this.editTeacherProgramInfo.newProjectId = res.data.data.project_id
					this.editTeacherPlan = true

					//让年级变色
					if($.inArray(this.editTeacherProgramInfo.get_grade.id,this.gradeArr) > -1){
						for(var i=0; i<this.gradeArr.length;i++){
							$('#'+this.gradeArr[i]).css({"background":"#ccc"})
							$('#'+this.gradeArr[i]).css({"color":"#666"})
						}
						$('#'+this.editTeacherProgramInfo.get_grade.id).css({"background":"#00B02D"})
						$('#'+this.editTeacherProgramInfo.get_grade.id).css({"color":"#fff"})
						//旧的年级id
						this.gradeId = this.editTeacherProgramInfo.get_grade.id
					}
					//上下学期变色之前让还原颜色
					$('#'+this.semester*10).css({"background":"#ccc"})
					$('#'+this.semester*10).css({"color":"#666"})
					//让上下学期变色
					if(this.editTeacherProgramInfo.semester == '上学期'){
						this.semester = 1
						$('#'+this.semester*10).css({"background":"#00B02D"})
						$('#'+this.semester*10).css({"color":"#fff"})
					}else if(this.editTeacherProgramInfo.semester == '下学期') {
						this.semester = 2
						$('#'+this.semester*10).css({"background":"#00B02D"})
						$('#'+this.semester*10).css({"color":"#fff"})
					}
				})
			},
			//编辑提交
			editPostInsertProgram(){
				this.$http.post('/api/program/updateTeacherProgramInfo',{
					id:this.editTeacherProgramInfo.id,//教学计划id
          class_hour:this.editTeacherProgramInfo.class_hour,//课时
          plan_type_id:this.oneProjectIdAll,
          school_year_id:this.editTeacherProgramInfo.new_school_year_id,
          grade_id:this.editTeacherProgramInfo.newGradeId,
          semester:this.editTeacherProgramInfo.newSemester,
					old_grade_id:this.editTeacherProgramInfo.GradeId,
				}).then(res=>{
					if(res.data.code == 200) {
						this.$message({
							message:res.data.msg,
							type:'success'
						})
						this.getProgramInfo()
						this.editTeacherPlan = false
						this.active = 0
						$('#semester1').css({"background":"#ccc"})
						$('#semester2').css({"background":"#ccc"})
					}else if(res.data.errorCode == 400){
						this.$message({
							message:res.data.msg,
							type:'error'
						})
					}
				})
			},
			//返回上一页
			back(){
				this.$router.push({name:'teaching'})
			},
			//获取年级班级以及项目
			addTeacherPlan(){
				this.teacherPlan = true
				this.active = 0
				this.$http.post('api/program/getSchoolYearGradeInfo',{
				}).then(res=>{
          this.yearInfo = res.data.data.schoolYearInfo
          if(this.yearInfo.length == 0){
            this.$message({
              type:'error',
              message:'请通知管理员设置学年'
            })
          }
          var year =[]
          this.yearInfo.map(item=>{
            if(item.semester == 1) {
              item.semeter = '上学期'
              item.year = item.section + item.semeter
            }else{
              item.semeter = '下学期'
              item.year = item.section + item.semeter

            }
            year.push(item)
          })
          this.nowYearInfo = year
          this.gradeInfo = res.data.data.gradeInfo
          this.school_year_id =this.yearInfo.id
          var gradeArr =[]
          res.data.data.gradeInfo.map(item=>{
            gradeArr.push(item.id)
          })
          this.gradeArr = gradeArr
          localStorage.setItem('gradeArr',this.gradeArr)
        })
			},
			//步骤部分
			prev(){
				--this.active
				if(this.active <2) this.active =0
			},
			next() {
        if (this.active++ > 1) this.active = 0;
        if(!this.gradeId) {
          this.$message({
            message:'请选择年级',
            type:'error'
          })
          this.active = 0
        }
        //获取运动项目
        this.$http.post('/api/program/getProjectInfo',{
          grade_id:this.gradeId
        }).then(res=>{
          this.getProjectInfo = res.data.data
        })
      },
			//点击项目
			projectId(id){
				//选中的项目变色并且追加到oneProjectIdAll数组中
        if($.inArray(id,this.oneProjectIdAll) > -1){
          $('#'+id).css({"background": "#ccc"})
          $('#'+id).css({"color":"#666"})
          var keys = this.oneProjectIdAll.indexOf(id)
          delete this.oneProjectIdAll.splice(keys,1)
        }else{
          $('#'+id).css({"background": "#00B02D"})
          $('#'+id).css({"color":"#fff"})
          this.oneProjectIdAll.push(id);
        }
				this.editTeacherProgramInfo.newProjectId = this.progect_id
			},
		  	//编辑的下一步
			editNext(){
				console.log(this.oneProjectIdAll)
				//获取运动项目
				this.$http.post('/api/program/getProjectInfo',{
					grade_id:this.gradeId
				}).then(res=>{
					this.getProjectInfo = res.data.data
				})

				if (this.active++ > 1) this.active = 0;
			},
			//确认保存
			insertProgram(){
				this.$http.post('/api/program/insertProgram',{
					grade_id:this.gradeId,
					plan_type_id:this.oneProjectIdAll,
					class_hour:this.classNum,
					school_year_id:this.school_year_id,
					semester:this.semester,
				}).then(res=>{
					if(res.data.code == 200) {
						this.teacher_program = res.data.data.teacher_program
						this.$message({
							message:res.data.msg,
							type:'success'
						})
						this.getProgramInfo()
						this.teacherPlan = false
						//清空数据
						this.gradeId='',
						this.classNum ='',
						this.school_year_id ='',
						this.semester ='',
						this.oneProjectIdAll = []
					}else if(res.data.errorCode == 400){
						this.$message({
							message:res.data.msg,
							type:'error'
						})
						this.active = 0
						this.gradeId='',
						this.classNum ='',
						this.school_year_id ='',
						this.semester ='',
						this.oneProjectIdAll = []
					}
				})
			},
			//保存并定制单元计划
			//异步改为同步
			async preservation(){
				await this.$http.post('/api/program/insertProgram',{
					grade_id:this.gradeId,
					plan_type_id:this.oneProjectIdAll,
					class_hour:this.classNum,
					school_year_id:this.school_year_id,
					semester:this.semester,
				}).then(res=>{
					this.code = res.data.code
					if(res.data.code == 200) {
						this.teacher_program = res.data.data.teacher_program
						this.$message({
							message:res.data.msg,
							type:'success'
						})
						this.getProgramInfo()

					}else if(res.data.errorCode == 400){
						this.$message({
							message:res.data.msg,
							type:'error'
						})
						this.active = 0
					}
				})
				if(this.code == 200) {
					//单元计划获取运动项目的教案信息
					await this.$http.post('/api/teacher_plan/getPlanInfo',{
						id:this.oneProjectIdAll,
						grade_id:this.gradeId
					}).then(res=>{
						this.getPlan = res.data.data
					})
					await this.$http.post('/api/program/getTeacherProgramClassHour',{
						id:this.teacher_program
					}).then(res=>{
						this.class_hour = res.data.data.class_hour
					})
					if (this.active++ > 1) this.active = 0;
				}
			},
			//选择单元计划里的项目
			selectProject(id,motion,planid){
				var obj = {}
				obj.plan_type_id = planid
				obj.motion = motion
				obj.plan_id = id
				if($.inArray(id,this.planProjectIdAll) > -1){
					$('#'+id).css({"background": "#ccc"})
					$('#'+id).css({"color": "#666"})
					var keys = this.planProjectIdAll.indexOf(id)
					delete this.planProjectIdAll.splice(keys,1)
					delete this.planArr.splice(keys,1)
					this.delId.push(id)
					delete this.teacherPlanInfoArr.splice(keys,1)
				}else{
					$('#'+id).css({"background": "#00B02D"})
					$('#'+id).css({"color": "#fff"})
					this.planArr.push(obj)
					this.planProjectIdAll.push(id);
					this.teacherPlanInfoArr.push(id)
				}
				this.planLength = this.planArr.length
				//移除单元计划
				if(this.teacherPlanInfo != 0) {

				}
			},
			//确认创建单元计划
		    insertTeacherPlan(){
				this.$http.post('/api/teacher_plan/insertTeacherPlan',{
					grade_id:this.gradeId,
					class_hour:this.planLength,
					total_class_hour:this.class_hour,
					data:this.planArr,
					teacher_program_id:this.teacher_program,
					school_year_id:this.school_year_id,
				}).then(res=>{
					if(res.data.code == 200) {
						this.$message({
							message:res.data.msg,
							type:'success'
						})
						this.teacherPlan = false
						this.getProgramInfo()
						//清空数据
						this.gradeId='',
						this.classNum ='',
						this.school_year_id ='',
						this.semester ='',
						this.oneProjectIdAll = [],
						this.planLength ='',
						this.class_hour='',
						this.planArr =[],
						this.teacher_program=''
						this.active = 0
					}else if(res.data.errorCode == 400){
						this.$message({
							message:res.data.msg,
							type:'error'
						})
						this.teacherPlan = true
					}
				})
			},
			//创建教学计划关闭
			closeDialog(){
				//关闭后学年颜色变成灰色
				this.nowYearInfo =''
				this.gradeInfo = ''
				this.classNum =''
				this.gradeId= ''
				this.semester = ''
				this.oneProjectIdAll =[]
				this.planProjectIdAll = []
			},
			//创建单元计划
			async createPlan(id){
				this.unit_plan = true
				await this.$http.post('/api/program/editTeacherPlan',{
					id:id
				}).then(res=>{
					this.planTypeInfo = res.data.planTypeInfo
					var planInfoId =[]
					this.planTypeInfo.map(item=>{
						item.get_plan_motion.map(it=>{
							planInfoId.push(it.id)
						})
					})
					this.planInfoId = planInfoId
					//获取添加单元计划的信息
					this.info.class_hour = res.data.info.class_hour
					this.info.grade_id = res.data.info.grade_id
					this.info.id = res.data.info.id
					this.info.school_year_id = res.data.info.school_year_id
				})
				await this.$http.post('/api/program/getPlanTypeInfo',{
					id:id
				}).then(res=>{
					this.teacherPlanInfo = res.data.teacherPlan
					var plan_id =[]
					this.teacherPlanInfo.map(item=>{
						plan_id.push(item.plan_id)
					})
					this.teacherPlanInfoArr = plan_id
					for(var i = 0 ;i <this.teacherPlanInfoArr.length; i++){
						if(this.planInfoId.includes(this.teacherPlanInfoArr[i])){
							$('#'+this.teacherPlanInfoArr[i]).css({"background-color":"#00B02D"})
							$('#'+this.teacherPlanInfoArr[i]).css({"color":"#fff"})

						}
					}
				})


			},
			//编辑单元计划里选择项目
			selectProject2(id,motion,plan_type_id){
				var obj = {}
				obj.plan_type_id = plan_type_id
				obj.motion = motion
				obj.plan_id = id
				if($.inArray(id,this.teacherPlanInfoArr) >-1){
					this.teacherPlanInfo.map(item=>{
						if(item.plan_id == id){
							if($.inArray(item.id,this.delId) == -1){
								$('#'+id).css({"background": "#ccc"})
								$('#'+id).css({"color": "#666"})
								this.delId.push(item.id)
							}else {
								$('#'+id).css({"background": "#00B02D"})
								$('#'+id).css({"color": "#fff"})
								var a = $.inArray(item.id,this.delId)
								this.delId.splice(a,1)
							}
						}
					})
				}else {
					if($.inArray(id,this.planProjectIdAll)>-1){
						$('#'+id).css({"background": "#ccc"})
						$('#'+id).css({"color": "#666"})
						var keys = this.planProjectIdAll.indexOf(id)
						delete this.planProjectIdAll.splice(keys,1)
						delete this.plandata.splice(keys,1)
					}else {
						$('#'+id).css({"background": "#00B02D"})
						$('#'+id).css({"color": "#fff"})
						this.planProjectIdAll.push(id)
						this.plandata.push(obj)
					}
					this.planLength = this.plandata.length
				}
			},
			//单元计划创建编辑
			postCreate(){
				if(this.teacherPlanInfo.length == 0) {
					this.$http.post('/api/teacher_plan/insertTeacherPlan',{
						grade_id:this.info.grade_id,
						class_hour:this.planLength,
						total_class_hour:this.info.class_hour,
						data:this.plandata,
						teacher_program_id:this.info.id,
						school_year_id:this.info.school_year_id,
					}).then(res=>{
						if(res.data.code == 200) {
							this.$message({
								message:res.data.msg,
								type:'success'
							})
							this.getProgramInfo()
							this.unit_plan = false
						}else if(res.data.errorCode == 400){
							this.$message({
								message:res.data.msg,
								type:'error'
							})
						}
					})
				}else if(this.teacherPlanInfo.length != 0) {
					this.$http.post('/api/program/updateTeacherPlanInfo',{
						teacher_program_id:this.info.id,
						grade_id:this.info.grade_id,
						school_year_id:this.info.school_year_id,
						class_hour:this.planLength,
						total_class_hour:this.info.class_hour,
						del_id:this.delId,
						data:this.plandata,
					}).then(res=>{
						if(res.data.code == 200) {
							this.$message({
								message:res.data.msg,
								type:'success'
							})
							this.getProgramInfo()
							this.unit_plan = false
						}else if(res.data.errorCode == 400){
							this.$message({
								message:res.data.msg,
								type:'error'
							})
						}
					})
				}
			}
		},
		created(){
			this.getProgramInfo()
			this.getYear()
			//获取到身份
			var rule = localStorage.getItem('rule')
			this.rule = rule
			this.gradeArr = localStorage.getItem('gradeArr')
		}
	}
</script>

<style>
	.el-main {
		padding: 0;
	}
	.middle {
	    height: 100%;
	    width: 100%;
	    background-repeat:repeat;
	    background-size: contain;
	    background-position: center;
	    background-attachment: fixed;
	    z-index: -1;
	}
</style>
<style lang="less" scoped>
	.middlebg {
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		background: url(../../assets/image/bg-img.png) no-repeat center;
		background-size: 100%;
	}
	.top {
		height: 50px;
		line-height: 50px;
		background-color: #dbdbdb;
		position: relative;
		.teacherPlan {
			display: inline-block;
			background: #00b02d;
			padding:0 15px;
			color: #fff;
		}
		.addTeacherPlan {
			display: inline-block;
			background: #3A8EE6;
			height: 24px;
			line-height: 24px;
			position: absolute;
			right: 100px;
			top: 10px;
			padding: 3px 15px;
			font-size: 14px;
			border-radius: 5px;
			color: #fff;
			cursor: pointer;
		}
		.back {
			position: absolute;
			right: 0;
			background: #9cbf83;
			padding: 0 15px;
			border-radius: 3px;
			color: #fff;
			cursor: pointer;
		}
	}
	.box-card {
		margin: 30px 50px;
		.boxCard {
			padding: 20px;
		}
		.fenye {
			margin-top: 20px;
			text-align: center;
		}
		.card {
			.title {
				display: block;
				text-align: center;
				font-size: 20px;
				font-weight: 700;
				margin-top: 10px;
				margin-bottom: 20px;
			}
			.sport {
				.oneTitle {
				    height: 30px;
				    line-height: 30px;
				    background: #3A8EE6;
				    cursor: pointer;
				    width: 100px;
				    text-align: center;
					margin-bottom: 10px;
					color:#fff
			    }
			    .twoTitle {
			    	display: inline-block;
				    padding: 0 10px;
				    height: 30px;
				    line-height: 30px;
				    background: #ccc;
				    margin:0 10px 10px 0;
				    cursor: pointer;
			    }
			}
			.center {
				text-align: center;
				margin:20px 0;
				cursor: pointer;
				.semester {
					height: 30px;
					line-height: 30px;
					text-align: center;
					padding: 0 10px;
					background-color: #ccc;
					display: inline-block;
					margin-right:20px;
					border-radius: 5px;
				}
				.grade {
					padding:0 10px;
					height: 25px;
					line-height: 25px;
					text-align: center;
					background-color: #ccc;
					display: inline-block;
					margin-right:10px;
					border-radius: 5px;
					margin-top:10px ;
				}

				.active {
					background: #00b02d;
				}
				.classNum {
					width: 10%;
					height: 20px;
				}
			}
			.left {
				margin:20px 0;
				cursor: pointer;
				.grade {
					padding:0 10px;
					height: 25px;
					line-height: 25px;
					text-align: center;
					background-color: #ccc;
					display: inline-block;
					margin-right:10px;
					border-radius: 5px;
					margin-top:10px ;
				}
				.motion {
					padding:0 10px;
					height: 25px;
					line-height: 25px;
					text-align: center;
					border: 1px dashed #ccc;
					display: inline-block;
					margin-right:10px;
					border-radius: 5px;
					margin-top:10px ;
				}
				.hour {
					display: inline-block;
					font-size: 20px;
					font-weight: 700;
					margin-top: 10px;
					margin-right: 10px;
				}
				.classNum {
					width: 10%;
					height: 20px;
				}
				.center {
					margin-top: 20px;
					display: block;
					text-align: center;
					font-size: 18px;
					font-weight: 600;
				}
			}
			.content {
				.material {
					display: block;
					padding: 10px 0;
				}
			}
		}
	}

</style>
